﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>时尚衣橱购物商城</title>
    <meta name="description" content="Default Description">
    <meta name="keywords" content="E-commerce" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.png">
    <!-- Google Font css -->
    <link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet"> 

    <!-- mobile menu css -->
    <link rel="stylesheet" href="/css/meanmenu.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="/css/animate.css">
    <!-- nivo slider css -->
    <link rel="stylesheet" href="/css/nivo-slider.css">
    <!-- owl carousel css -->
    <link rel="stylesheet" href="/css/owl.carousel.min.css">
    <!-- slick css -->
   <link rel="stylesheet" href="/css/slick.css">
    <!-- price slider css -->
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <!-- fontawesome css -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
     <!-- fancybox css -->
    <link rel="stylesheet" href="/css/jquery.fancybox.css">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- default css  -->
    <link rel="stylesheet" href="/css/default.css">
    <!-- style css -->
    <link rel="stylesheet" href="../static/css/style.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/theme-default.css">
    <link rel="stylesheet" href="/css/shortcode/footer.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/service.css">
    <link rel="stylesheet" href="/css/shortcode/product.css">
    <link rel="stylesheet" href="/css/shortcode/slider.css">
    <link rel="stylesheet" href="/css/shortcode/parallax.css">
    <link rel="stylesheet" href="/css/shortcode/login.css">
    <link rel="stylesheet" href="/css/shortcode/subscribe.css">
    <link rel="stylesheet" href="/css/shortcode/footer.css">
    <link rel="stylesheet" href="/css/shortcode/cart.css">
    <link href="/css/shortcode/single-product.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/shortcode/checkout.css">
    <!-- modernizr js -->
    <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>

    
    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Header Area Start -->
        <header>
            <!-- Kiosk Header Top Start -->
            <div class="kiosk-header-top">
                <div class="container">
                    <div class="row">
                        <!-- Header Top left Start -->                        
                        <div class="col-lg-6 col-md-12 d-center">
                            <div class="kiosk-header-top-left">
                                <i class="fa fa-phone"></i>中软国际: 400-183-1066
                            </div>                        
                        </div>
                        <!-- Header Top Right Start -->                                       
                        <div class="col-lg-6 col-md-12">
                            <div class="kiosk-header-top-right">
                                <div class="search-box-view">
                                    <form action="#">
                                        <input type="text" class="email" placeholder="Search Your Product" name="product">
                                        <button type="submit" class="submit"></button>
                                    </form>
                                </div>
                                <!-- Header-list-menu End -->
                            </div>
                        </div>
                        <!-- Header Top Right End -->
                    </div>
                </div>
                <!-- Container End -->
            </div>
            <!-- Header Top End -->
            <!-- Kiosk Header Bottom Start -->
            <div th:include="top :: topFragment"></div>
            <!-- Header Bottom End -->
        </header>
        <!-- Header Area End -->      
        <!-- Breadcrumb Start -->

        <!-- Breadcrumb End -->
        <!-- kiosk-checkout-area start -->
        <div class="kiosk-checkout-area ptb-70">
            <div class="container">
                <form id="PayFrom" method="post" action="/toPay">
                    <input type="hidden" id="address_id" name="address_id"/>
                    <input type="hidden" th:value="${orders.order_id}" name="order_id"/>
                    <input type="hidden" th:value="${orders.order_price}" name="order_price"/>
                </form>
                <div class="row">
                        <div class="col-lg-6 col-md-6">
                            <div class="kiosk-checkbox-form">
                                <h3>收货地址</h3>
                                <div class="row" th:each="address,porStat:${addressList}" th:if="${porStat.index} le 0">
                                    <div class="col-md-6">
                                        <div class="checkout-form-list">
                                            <label><input style="appearance: auto;position: absolute;right: 30px;left: -288px;height: 25px;margin: 39px;" th:value="${address.address_id}" type="radio" name="aid">收货人姓名<span class="required">*</span></label>
                                            <input type="text" placeholder="" th:value="${address.address_name}"/>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="checkout-form-list mb-30">
                                            <label>手机号码<span class="required">*</span></label>
                                            <input type="text" placeholder="phone" th:value="${address.uphone}"/>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="checkout-form-list mb-30">
                                            <label>电子邮件</label>
                                            <input type="email" placeholder="" th:value="${address.email}"/>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="checkout-form-list mb-30">
                                            <label>所在地区</label>
                                            <input type="text" placeholder="" th:value="${address.address_detail}"/>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="checkout-form-list mb-30">
                                            <label>详细地址<span class="required">*</span></label>
                                            <input type="text" placeholder="" th:value="${address.address_in_detail}"/>
                                        </div>
                                    </div>
                                    <div class="checkout-form-list">
                                        <label>备注</label>
                                        <textarea id="checkout-mess" cols="30" rows="10" placeholder="备注文本"></textarea>
                                    </div>
                                </div>
                                </div>
                                <div class="different-address">
                                    <div class="ship-different-title">
                                        <h3>
                                            <label>选择其他收货地址</label>
                                            <input id="ship-box" type="checkbox" />
                                        </h3>
                                    </div>
                                    <div id="ship-box-info">
                                        <div class="row" th:each="address,porStat:${addressList}" th:if="${porStat.index > 0}">
                                            <div class="col-md-6">
                                                <div class="checkout-form-list">
                                                    <label><input style="appearance: auto;position: absolute;right: 30px;left: -288px;height: 25px;margin: 39px;" th:value="${address.address_id}" type="radio" name="aid">收货人姓名<span class="required">*</span></label>
                                                    <input type="text" placeholder="" th:value="${address.address_name}"/>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="checkout-form-list mb-30">
                                                    <label>手机号码<span class="required">*</span></label>
                                                    <input type="text" placeholder="phone" th:value="${address.uphone}"/>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="checkout-form-list mb-30">
                                                    <label>电子邮件</label>
                                                    <input type="email" placeholder="" th:value="${address.email}"/>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="checkout-form-list mb-30">
                                                    <label>所在地区</label>
                                                    <input type="text" placeholder="" th:value="${address.address_detail}"/>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="checkout-form-list mb-30">
                                                    <label>详细地址<span class="required">*</span></label>
                                                    <input type="text" placeholder="" th:value="${address.address_in_detail}"/>
                                                </div>
                                            </div>
                                            <div class="checkout-form-list">
                                                <label>备注</label>
                                                <textarea id="checkout-messD" cols="30" rows="10" placeholder="备注文本"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="order-notes">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="kiosk-checkbox-form">
                                <h3>您的订单</h3>
                            </div>
                            <div class="kiosk-order">
                                <div class="kiosk-order-table table-responsive">
                                    <table>
                                        <tbody>
                                            <tr class="cart_item" th:each="order:${orderDetails}">
                                                <td class="product-name" th:text="${order.c_name}">
                                                    订单名称
                                                </td>
                                                <td class="product-total">￥
                                                    <span class="amount" th:text="${order.c_price}">订单价格</span>
                                                </td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr class="order-total">
                                                <th>订单总价</th>
                                                <td class="product-total">
                                                    <strong>￥<span th:text="${orders.order_price}" class="amount"></span></strong>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                                <div class="kiosk-payment">
                                    <div class="payment-accordion">
<!--                                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">-->
<!--                                            <div class="panel panel-default">-->
<!--                                                <div class="panel-heading" role="tab" id="headingOne">-->
<!--                                                    <h4 class="panel-title">-->
<!--                                                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">-->
<!--                                                    Direct Bank Transfer-->
<!--                                                    </a>-->
<!--                                                    </h4>-->
<!--                                                </div>-->
<!--                                                <div id="collapseOne" class="panel-collapse collapse  in show" role="tabpanel" aria-labelledby="headingOne">-->
<!--                                                    <div class="panel-body">-->
<!--                                                        <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                            <div class="panel panel-default">-->
<!--                                                <div class="panel-heading" role="tab" id="headingTwo">-->
<!--                                                    <h4 class="panel-title">-->
<!--                                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">-->
<!--                                                    Cheque Payment-->
<!--                                                    </a>-->
<!--                                                    </h4>-->
<!--                                                </div>-->
<!--                                                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">-->
<!--                                                    <div class="panel-body">-->
<!--                                                        <p>Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                            <div class="panel panel-default">-->
<!--                                                <div class="panel-heading" role="tab" id="headingThree">-->
<!--                                                    <h4 class="panel-title">-->
<!--                                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">-->
<!--                                                    PayPal-->
<!--                                                    </a>-->
<!--                                                    </h4>-->
<!--                                                </div>-->
<!--                                                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">-->
<!--                                                    <div class="panel-body">-->
<!--                                                        <p>Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </div>-->
                                        <div class="kiosk-payment-btn">
                                            <input type="submit" value="下订单" onclick="toPay()"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        <!-- kiosk-checkout-area end -->
        <!-- newsletter start -->

        <!-- newsletter end -->
        <!-- Footer Start -->
        <div th:include="lop :: topFragment"></div>
        <!-- Footer End -->
    </div>
    <!-- Wrapper End -->
    <!-- jquery 3.12.4 -->
    <script src="/js/vendor/jquery-1.12.4.min.js"></script>
    <!-- mobile menu js  -->
    <script src="/js/jquery.meanmenu.min.js"></script>
    <!-- scroll-up js -->
    <script src="/js/jquery.scrollUp.js"></script>
    <!-- owl-carousel js -->
    <script src="/js/owl.carousel.min.js"></script>
    <!-- slick js -->
    <script src="/js/slick.min.js"></script>
    <!-- wow js -->
    <script src="/js/wow.min.js"></script>
    <!-- price slider js -->
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/jquery.countdown.min.js"></script>
    <!-- nivo slider js -->
    <script src="/js/jquery.nivo.slider.js"></script>
    <!-- fancybox js -->
    <script src="/js/jquery.fancybox.min.js"></script>
    <!-- bootstrap -->
    <script src="/js/bootstrap.min.js"></script>
    <!-- popper -->
    <script src="/js/popper.js"></script>
    <!-- plugins -->
    <script src="/js/plugins.js"></script>
    <!-- stellar -->
    <script src="/js/jquery.stellar.min.js"></script>
    <script src="/js/parallax.js"></script>
    <!-- main js -->
    <script src="/js/main.js"></script>
<script>
    function toPay(){
        var address_id=$("input[name='aid']:checked").val();
        $("#address_id").val(address_id);
        $("#PayFrom").submit();
    }
</script>
</body>
</html>
